<template>
    <div v-if="$route.meta.footer" class="footer">
        <mt-tabbar v-model="selected" fixed>
            <mt-tab-item id="index" @click.native="jumpToNeed">
                <p class="icon-dingdan-tab-weixuanzhong_huaban iconfont" :class="selected == 'index'?'icon-dingdan-tab-xuanzhong_huaban':''"></p>
                订单
            </mt-tab-item>
            <mt-tab-item id="goods" @click.native="jumpToNeed">
                <p class="icon-wodeshangpin-tab-weixuanzhong_huaban iconfont" :class="selected == 'goods'?'icon-wodeshangpin-tab-xuanzhong_huaban':''"></p>
                我的商品
            </mt-tab-item>
            <mt-tab-item id="userCenter" @click.native="jumpToNeed">
                <p class="icon-wode-tab-weixuanzhong_huaban iconfont" :class="selected == 'userCenter'?'icon-wode-tab-xuanzhong_huaban':''"></p>
                商家中心
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>
<script>
export default {
    name:"Footer",
    data() {
        return {
            selected:"index"
        }
    },
    updated(){
        
    },
    methods:{
        jumpToNeed(){
            // console.log(this.selected);
            if(this.$route.name === this.selected) return;
            this.$router.push({path:`/${this.selected}`})

        }
    }
}
</script>
<style scoped>
    .iconfont {
        font-size: 1.5rem;
        margin: 0.5rem 0;
    }
    .footer>div{
        height: 4rem;
    }
    .footer >>> .mint-tabbar > .mint-tab-item.is-selected{
        color: #F0463C;
    }
</style>